/* 单条评论或者回复（组件复用） */
<template>
	<view class="comment">
		<!-- 左侧-头像 -->
		<aha-avatar
			:src="comment.userInfo.avatarUrl"
			circle
			size="40"
		/>
		<!-- 右侧 -->
		<view
			:style="{
				'border': showBorder ? '' : 'none'
			}"
			class="right"
			@longpress="longpress"
		>
			<!-- 昵称 -->
			<view class="name">{{comment.userInfo.nickname}}</view>
			<!-- 内容 -->
			<view
				class="comment-content"
				@click="writeReply"
			>
				{{comment.toUserInfo ? `回复${comment.toUserInfo.nickname}：` : ''}}
				{{comment.content}}
			</view>
			<!-- 前三条回复, 如果有的话 -->
			<view
				v-if="showReply && comment.replies.total>0"
				class="replies"
				@click="$emit('readReplies')"
			>
				<view
					class="item"
					v-for="reply in comment.replies.pageData.slice(0,2)"
					:key="reply.id"
				>
					<text class="strong">{{reply.userInfo.nickname}}：</text>
					<text class="reply-content">{{reply.content}}</text>
				</view>
				<!-- 查看全部评论 -->
				<view
					v-if="comment.replies.total>2"
					class="read-all"
					@click="$emit('readReplies')"
				>
					查看全部回复
				</view>
			</view>
			<!-- 时间 评论 点赞 -->
			<view class="footer u-flex">
				<view class="time small u-flex-1">{{comment.createTime | msgTime}}</view>
				<view
					class="reply-num u-flex"
					@click="writeReply"
				>
					<u-icon
						name="more-circle"
						size="35"
					/>
					{{comment.replies.total > 0 ? comment.replies.total : ''}}
				</view>
				<view
					:style="{
						color: comment.isLike ? '#f54d2c' : '#606266'
					}"
					class="thumb u-flex"
					@click="onclickLike"
				>
					<u-icon
						:name="comment.isLike ? 'thumb-up-fill' : 'thumb-up'"
						size="35"
					/>
					{{comment.likes}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserInfo } from '@/utils/user'
import { copyData } from '@/utils/index'
export default {
  props: {
    comment: {
      type: Object,
      required: true
    },
    showReply: {
      type: Boolean,
      default: false
    },
    showBorder: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    /**
		 * 写回复
		 */
    writeReply() {
      uni.$emit('showInput', {
        type: 'reply',
        comment: this.comment
      })
    },
    /**
		 * 点击点赞，判断是点赞评论还是回复, 有回复字段的说明是评论
		 */
    onclickLike() {
      uni.$emit('likeContent', this.comment)
    },
    /**
		 * 长按内容，menu弹窗提示
		 */
    async longpress() {
      const menus = ['复制', '回复']

      if (getUserInfo().userInfo.userId === this.comment.uid) {
        menus.push('删除')
      }
      const res = await this.$menuPicker(menus)

      switch (res) {
        case '复制':
          copyData(this.comment.content, '复制成功')
          break
        case '回复':
          this.writeReply()
          break
        case '删除':
          uni.$emit('delContent', this.comment)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  display: flex;

  .right {
    flex: 1;
    height: 100%;
    margin-left: 10px;
    border-bottom: $border1;

    .name {
      font-size: $sSmall;
    }

    .comment-content {
      padding: 8px 2px;
    }

    /* 回复内容 */
    .replies {
      padding: 5px 10px;
      background-color: #f3f3f3;
      border-radius: $radiusMiddle;

      .item:not(:last-of-type) {
        margin-bottom: 5px;
        font-size: $sSmall;
      }

      .read-all {
        font-weight: bold;
        color: $primary1;
      }
    }

    /* 底部一些提示 */
    .footer {
      padding: 8px 0;

      .time {
        color: $gray1;
      }

      .thumb {
        margin: 0 20rpx 0 60rpx;
      }

      ::v-deep u-icon {
        margin-right: 5rpx;
      }
    }
  }
}
</style>
